Example: Fly to a certain point

Introduction

This guide demonstrates how to use the flyTo function with the bkoi-gl package to animate the map to a specific location when a button is clicked.

Example

"use client";
import { useEffect, useRef, useState } from "react";
import { Map, Marker } from "bkoi-gl"; // Import Package
import "bkoi-gl/dist/style/bkoi-gl.css"; // Import CSS

const MainMap = () => {
  // Refs for map container and map instance
  const mapContainer = useRef(null);
  const map = useRef(null);

  // State to manage the button click
  const [mapInitialized, setMapInitialized] = useState(false);

  useEffect(() => {
    if (map.current) return; // Ensures map initializes only once

    // Initialize the map
    map.current = new Map({
      container: mapContainer.current,
      center: [90.39017821904588, 23.719800220780733], // Dhaka coordinates
      zoom: 10,
      doubleClickZoom: false,
      accessToken: "YOUR_BARIKOI_API_KEY_HERE", // Replace with your Barikoi API key
    });

    // Set mapInitialized to true when the map is ready
    setMapInitialized(true);
  }, []);

  // Function to handle flyTo on button click
  const handleFlyTo = () => {
    if (map.current) {
      map.current.flyTo({
        center: [90.4, 23.8], // New coordinates to fly to
        zoom: 12, // New zoom level
        speed: 1, // Speed of the animation (0 to 1)
        curve: 1, // The curve of the flyTo animation (0 to 1)
        easing: (t) => t, // Easing function for the animation
      });
    }
  };

  return (
    <div>
      <div ref={mapContainer} style={containerStyles} />
      {mapInitialized && (
        <button style={buttonStyles} onClick={handleFlyTo}>
          Fly to Location
        </button>
      )}
    </div>
  );
};

// JSX Styles
const containerStyles = {
  width: "100%",
  height: "100vh",
  minHeight: "400px",
  overflow: "hidden",
};

const buttonStyles = {
  position: "absolute",
  top: "10px",
  left: "10px",
  padding: "10px 20px",
  backgroundColor: "#007bff",
  color: "#fff",
  border: "none",
  borderRadius: "5px",
  cursor: "pointer",
  zIndex: 1, // Ensure the button is above the map
};

export default MainMap;